<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Uploader事件测试</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>Uploader事件测试</h4>
    <p>
        <a id="J_UploaderBtn" class="g-u uploader-button" data-config=
                '{"type" : "auto",
                    "autoUpload" : true,
                    "serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
                    "name":"Filedata",
                    "urlsInputName":"fileUrls"}'
           href="#">
            选择要上传的文件
        </a>
    </p>
    <ul id="J_UploaderQueue">

    </ul>

    <div id="J_Panel" class="event-panel">

    </div>
    <h4>Uploader事件列表</h4>
    <ul>
        <li><b>select</b>：选择完文件后触发</li>
        <li><b>start</b>：开始上传后触发</li>
        <li><b>progress</b>：正在上传中时触发</li>
        <li><b>success</b>：上传成功后触发</li>
        <li><b>complete</b>：上传完成（在上传成功或上传失败后都会触发）</li>
        <li><b>uploadFiles</b>：批量上传结束后触发</li>
        <li><b>cancel</b>：取消上传后触发</li>
        <li><b>error</b>：上传失败后触发</li>
    </ul>
    <h4>事件面板的代码</h4>
    <pre class='brush: js; '>
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        ru.on("init", function (ev) {
            var uploader = ev.uploader;
            addMsg(ev, '组件初始化完成');
            uploader.on('render', function (ev) {
                addMsg(ev, '组件成功初始化');
            });
            uploader.on('select', function (ev) {
                var files = ev.files;
                addMsg(ev, '选择了' + files.length + '个文件');
            });
            uploader.on('start', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '开始上传,文件名：' + file.name + '，队列索引为：' + index);
            });
            uploader.on('progress', function (ev) {
                var file = ev.file, loaded = ev.loaded, total = ev.total;
                addMsg(ev, '正在上传,文件名：' + file.name + '，大小：' + total + '，已经上传：' + loaded);
            });
            uploader.on('success', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '上传成功,文件名：' + file.name + '，队列索引为：' + index);
            });
            uploader.on('complete', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '上传结束,文件名：' + file.name + '，队列索引为：' + index);
            });
        })
     </pre>
</article>
<script>
    var S = KISSY, $ = S.Node.all;
    /**
     * 向事件面板添加消息
     * @param evt
     * @param msg
     */
    function addMsg(evt, msg) {
        var $panel = $("#J_Panel");
        $panel.append("<p>事件名称：" + evt.type + "，" + msg + "</p>");
    }
    S.config({
        packages:[
            {
                name:"gallery",
                path:"../../../../../../",
                charset:"utf-8"
            }
        ]
    });
    KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
        //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
        ru.on("init", function (ev) {
            var uploader = ev.uploader;
            addMsg(ev, '组件初始化完成');
            uploader.on('render', function (ev) {
                addMsg(ev, '组件成功初始化');
            });
            uploader.on('select', function (ev) {
                var files = ev.files;
                addMsg(ev, '选择了' + files.length + '个文件');
            });
            uploader.on('start', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '开始上传,文件名：' + file.name + '，队列索引为：' + index);
            });
            uploader.on('progress', function (ev) {
                var file = ev.file, loaded = ev.loaded, total = ev.total;
                addMsg(ev, '正在上传,文件名：' + file.name + '，大小：' + total + '，已经上传：' + loaded);
            });
            uploader.on('success', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '上传成功,文件名：' + file.name + '，队列索引为：' + index);
            });
            uploader.on('complete', function (ev) {
                var index = ev.index, file = ev.file;
                addMsg(ev, '上传结束,文件名：' + file.name + '，队列索引为：' + index);
            });
        })
    })
</script>
<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
